<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style>
   body{
      background-color: #21242d;
      color: #132c33;
      height: 100%;
      padding: 0;
      margin: 0;
      border: 0;
   }
   span{
      font-size:  1rem;
   }
   #divborder{
      position: absolute;
      left: 50%;
      margin-left: -12.5rem;  /*此处的负值是宽度的一半*/
      top: 20%;
      left: 50%;
      width: 25rem;
      height: 25rem;
      border-radius: 5%;
      border: 0.125rem solid;
      background-color: #f7f4ed;
      text-align: center;
   }
   button{
      width: 100%;
      height: 1.875rem;
      border: none;
      border-radius: 0.625rem;
      padding: 0;
   }
   button:active{
	   border: 0.0625rem solid #f7f4ed;
   }
   #ConnButton{
      margin-top: 5rem;
      font-size: 1.5rem;
		width: 13rem;
		height: 2.5rem;
		color: #f7f4ed;
		background-color: #2c9678;
   }
   .TextInput{
      outline:none;
      border-radius: 0.625rem;
      background-color: #f7f4ed;
      border: 0.125rem solid #5779c3;
      color: #132c33;
      font-size: 1rem;
      width: 2.5rem;
      height: 1.5rem;
   }

</style>
<div id="divborder">
   <div style="padding-top:  2rem;">
      <span style="font-size: 1.25rem;">Firmware update</span><br>
   </div>
   <hr>
   <div style="width: auto; height: 5rem;"></div>
	<div class="center_group" id="SettingIPInput">
		<span style="font-size: 1rem;">To IP:&ensp;</span>
		<input type="tel" class="TextInput" maxlength="3" id="IP1"/><span>&ensp;.&ensp;</span>
		<input type="tel" class="TextInput" maxlength="3" id="IP2"/><span>&ensp;.&ensp;</span>
		<input type="tel" class="TextInput" maxlength="3" id="IP3"/><span>&ensp;.&ensp;</span>
		<input type="tel" class="TextInput" maxlength="3" id="IP4"/>
	</div>
   <button id="ConnButton" type="button" onclick="ConnButton()">Connect</button>
</div>
 <script>
	var IP1 = document.getElementById("IP1");
	var IP2 = document.getElementById("IP2");
	var IP3 = document.getElementById("IP3");
	var IP4 = document.getElementById("IP4");
	
   //点击空格或.跳转下一个输入框
   $("#IP1").keydown(function (e) {
        if (e.keyCode == 32 || e.keyCode == 190 || e.keyCode == 110) {
            IP2.focus();
            return false;  //阻止本次键入
        }
   });
   $("#IP2").keydown(function (e) {
        if (e.keyCode == 32 || e.keyCode == 190 || e.keyCode == 110) {
            IP3.focus();
            return false;
        }
        if (e.keyCode == 8 && !IP2.selectionStart) {
            IP1.focus();
            return false;
        }
   });
   $("#IP3").keydown(function (e) {
        if (e.keyCode == 32 || e.keyCode == 190 || e.keyCode == 110) {
            IP4.focus();
            return false;
        }
        if (e.keyCode == 8 && !IP3.selectionStart) {
            IP2.focus();
            return false;
        }
   });
   $("#IP4").keydown(function (e) {
        if (e.keyCode == 32 || e.keyCode == 190 || e.keyCode == 110) {
            IP4.blur();
            return false;
        }
        if (e.keyCode == 8 && !IP4.selectionStart) {
            IP3.focus();
            return false;
        }
   });
   //监听回车
   $("body").keydown(function () { 
      if(event.keyCode == '13'){
         ConnButton();
      }
   });

	$(document).ready(function(){
		getUserIP(function(ip){
			IP1.value = ip.split('.')[0];
			IP2.value = ip.split('.')[1];
		});
	});
	var streamUrl; //固件升级端口
	var Running = document.getElementById("Running");

	function ConnButton(){
      if (IP1.value == '' || IP2.value == '' || IP3.value == '' || IP4.value == '') {
         alert("请输入正确的设备IP");
      }else{
         var baseHost = 'http://'+IP1.value+'.'+IP2.value+'.'+IP3.value+'.'+IP4.value
		   streamUrl = baseHost + ':89'	//固件升级端口
		   window.location.href = streamUrl+"/HttpOTAWeb"
      }
	}

 function getUserIP(onNewIP) { //  onNewIp - your listener function for new IPs
       //compatibility for firefox and chrome
       var myPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
       var pc = new myPeerConnection({
          iceServers: []
      }),
      noop = function() {},
      localIPs = {},
      ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g,
      key;
      function iterateIP(ip) {
          if (!localIPs[ip]) onNewIP(ip);
          localIPs[ip] = true;
     }
       //create a bogus data channel
      pc.createDataChannel("");
      // create offer and set local description
      pc.createOffer().then(function(sdp) {
          sdp.sdp.split('\n').forEach(function(line) {
              if (line.indexOf('candidate') < 0) return;
              line.match(ipRegex).forEach(iterateIP);
          });
          pc.setLocalDescription(sdp, noop, noop);
      }).catch(function(reason) {
          // An error occurred, so handle the failure to connect
      });
      //sten for candidate events
      pc.onicecandidate = function(ice) {
          if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
          ice.candidate.candidate.match(ipRegex).forEach(iterateIP);
      };
 }
 
 </script>

